<template>
  <div class="hot_code">
  	<div class="replyList">
      <div class="menu">
        <span @click="edit('')"><i class="el-icon-plus"></i>  添加热词</span>
      </div>
      <el-table :data = "tableData"
                ref="multipleTable"
                size="mini"
                stripe
                style = "width: 100%">
        <el-table-column class-name="quickReplyColumn" label = "分组标签">
          <template scope = "scope">
            <div @click = "showDetail(scope.$index, scope.row)"
                 class = "tag"
                 v-if = "!scope.row.content">
                  <i class="icon iconfont icon-zhankai" v-show="!isSpand(scope.$index)"></i>
                  <i class="icon iconfont icon-zuixiaohua" v-show="isSpand(scope.$index)"></i>{{scope.row.name}}</div>
            <div  :class="{detail: scope.row.content}"
                  v-if = "scope.row.content">{{scope.row.content}}</div>
          </template>
        </el-table-column>
        <el-table-column class-name="quickReplyColumn" label = "热词个数">
          <template scope = "scope">
            <div v-if = "!scope.row.content">{{scope.row.count}}</div>
          </template>
        </el-table-column>
        <el-table-column class-name="quickReplyColumn" label = "更新时间">
          <template scope = "scope">
            <div>{{scope.row.updatedTime}}</div>
          </template>
        </el-table-column>
        <el-table-column label = "操作" width="300px">
          <template scope = "scope">
            <span class = "edit"
                  v-if = "scope.row.content"
                  @click = "edit(scope.row)">{{$t('public.edit')}}</span>
            <span class = "del"
                  v-if = "scope.row.content"
                  @click = "openTip(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'hot_code',
    data () {
      return {
        tableData: []
      }
    },
    computed: {
    },
    components: {
    },
    props: {
      isShowCode: Boolean
    },
    methods: {
      // 编辑热词数据
      edit (obj) {
        this.$emit('editCode', obj)
      },
      // 判断是否展示+-号
      isSpand (index) {
        let tableData = this.tableData
        if (tableData[index + 1] && tableData[index + 1].content) {
          return true
        } else {
          return false
        }
      },
      // 切换到热词管理就初始化渲染table
      initTable (bool) {
        if (bool) {
          let data = {
            idle: ''
          }
          this.$store.dispatch('queryHotCode', data).then(res => {
            this.tableData = res.list
          })
        }
      },
      // 展示标签内容 接收当前列索引和当前列内容
      showDetail (index, obj) {
        let tableData = this.tableData
        if (tableData[index + 1] && tableData[index + 1].content) {
          tableData.splice(index + 1, obj.count)
        } else {
          this.getDetail(obj._id, obj.count).then(res => {
            let detailArr = res.list
            tableData.splice(index + 1, 0, ...detailArr)
          })
        }
      },
      // 发送请求返回promise对象
      getDetail (id, count) {
        let data = {
          page: '1',
          limit: count,
          id: id
        }
        return this.$store.dispatch('queryRCByTitle', data)
      }
    },
    beforeMount () {
    },
    watch: {
      isShowCode (cur, old) {
        this.initTable(cur)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .menu
    height 46px
    line-height 46px
    border 1px solid #E7E7EB
    border-bottom none
    padding-left 10px
    span
      cursor pointer
      margin-right 8px
      i
        color $c-main
  .replyList
    table
      tr
        td
          .iconfont
            font-size 16px
            margin-right 10px
          .detail
            text-indent 2em
          .tag
          .edit
          .del
          .addReply
            cursor pointer
          .edit
          .addReply
            color $c-main
          .del
            color $c-pink
            margin-left 30px
</style>
